<template>
  <div>
    <div class="vantTabs">
      <van-tabs v-model="active" sticky title-active-color="#fbef1a" @change="orderChange" @click="clickTitle"
                line-width="0px"
                line-height="0px"
                title-inactive-color="#191919">
        <van-tab v-for="(item,index) in taskType" :key="index" :name="index">
          <template #title>{{ item.menuName }}</template>
          <div class="search">
            <div class="searchpd">
              <input placeholder="任务名称" v-model.trim="page.title"/>
              <p @click="query">查询</p>
            </div>
          </div>
          <div style="width: 100%;height: 147px;"></div>
          <div class="revealCon">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
              <router-link tag="div"
                           :to="{path:'/assignmentDetail', query: {id:item.id,active:active,activeCurrentTaskCode:currentTaskCode}}"
                           v-for="(item,index) in revealConList" :key="index" class="revealConItem">
                <div class="revealConBg">
                  <div class="revealConTop">
                    <div class="photo">
                      <img :src="item.menuIcon">
                      <p>{{ item.taskType }}</p>
                    </div>
                    <div class="times">发布时间：{{ item.createTime }}</div>
                    <div class="num">接单数：{{ item.needMan }}</div>
                  </div>
                  <div class="introduce">
                    <div class="name">
                      <img :src="item.avatar"/>
                      <p>{{ item.nickName }}</p>
                    </div>
                    <div class="information">
                      <p class="item1">{{ item.title }}</p>
                      <span class="item2">{{ item.taskDemand }}</span>
                      <div class="item3">新人可做：{{ item.newManDoAble }}</div>
                      <div class="item4">
                        <div>任务标签：</div>
                        <ul>
                          <li v-for="(i,j) in item.taskTagsList" :key="j">{{ i }}</li>
                        </ul>
                      </div>
                      <div class="item5">
                        <div class="left">
                          <div class="principal">本金</div>
                          <p>￥{{ item.capital }}</p>
                        </div>
                        <div class="rit">
                          <div class="brokerage">佣金</div>
                          <p>￥{{ item.commission }}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </router-link>

            </van-list>
          </div>
        </van-tab>
      </van-tabs>


    </div>

    <div style="height: 50px;width: 100%"></div>
    <!--        底部导航栏-->
    <foot-nav></foot-nav>
  </div>
</template>

<script>
import footNav from "../components/base/tabbar.vue"
import navApi from "@/api/nav"
import taskApi from "@/api/task"

export default {
  name: "assignment",
  data() {
    return {
      count: 0,
      loading: false,
      finished: false,
      revealConList: [],
      taskType: [],
      currentTaskCode: '',
      active: 0,
      page: {
        title: '',
        pageNo: 1,
        pageSize: 10,
        taskType: "text_order"
      },
    }
  },

  created() {
    if (window.localStorage.getItem("tabActive")) {
      let active = window.localStorage.getItem("tabActive")
      let activeCurrentTaskCode = window.localStorage.getItem("activeCurrentTaskCode")
      this.active = Number(active)
      this.currentTaskCode = activeCurrentTaskCode
      this.page.taskType = activeCurrentTaskCode
      navApi.getIndexNav().then(res => {
        this.taskType = res.data.records
      })
      this.taskLoad()
      window.localStorage.removeItem('tabActive')
      window.localStorage.removeItem("activeCurrentTaskCode")
      return;
    }
    // 加载任务类型 && 从首页跳转到任务类型
    if (this.$route.query.code) {
      navApi.getIndexNav().then(res => {
        this.taskType = res.data.records
        for (let i = 0; i < this.taskType.length; i++) {
          if (this.taskType[i].menuCode == this.$route.query.code) {
            this.active = i
            this.currentTaskCode = this.taskType[i].menuCode
            this.page.taskType = this.currentTaskCode
            break
          }

        }
        this.taskLoad()
      })
      return

    }


    navApi.getIndexNav().then(res => {
      console.log(res)
      this.taskType = res.data.records
    })
    this.taskLoad()

  },
  methods: {
    query() {
      this.page.pageNo = 1
      this.taskLoad()
    },
    orderChange() {
    },
    clickTitle(name) {
      console.log(name)
      this.taskTypeList()
      this.currentTaskCode = this.taskType[name].menuCode
      // this.revealConList = []
      this.page.taskType = this.currentTaskCode
      this.page.pageNo = 1
      this.taskLoad()
      window.localStorage.setItem('page', this.page.taskType)
      window.localStorage.setItem('num', name)
    },
    taskTypeList() {
      navApi.getIndexNav().then(res => {
        console.log(res)
        this.taskType = res.data.records
      })
    },
    taskLoad() {
      taskApi.taskList(this.page).then(res => {
        console.log(res)
        this.revealConList = res.data.records
        this.finished = false
      })
    },
    onLoad() {
      this.page.pageNo += 1
      taskApi.taskList(this.page).then(res => {
        this.loading = false;
        var tal = res.data.pages
        // console.log(tal)
        this.revealConList = this.revealConList.concat(res.data.records)
        if (tal == 1) {
          this.page.pageNo = 1
        }
        if (tal == 0) {
          this.page.pageNo = 0
        }
        if (this.page.pageNo == tal) {
          this.page.pageNo = 0
          this.finished = true;
        }

      })
    },

  },

  components: {
    footNav
  },
}
</script>

<style lang="less" scoped>
.vantTabs {
  width: 100%;

  /deep/ .van-sticky {
    width: 100%;
    position: fixed;
    top: 80px;
    left: 0;
  }

  /deep/ .van-tab {
    font-size: 16px;
    /*font-weight: bold;*/
  }

  /deep/ .van-tab--active {
    font-weight: 600;
  }

  /deep/ .van-tabs__line {
    width: 0;
    height: 0;
  }

  .search {
    width: 100%;
    background: white;
    position: fixed;
    top: 0px;
    left: 0;

    .searchpd {
      padding: 50px 10px 10px 10px;
      display: flex;
      align-items: center;

      input {
        flex: 1;
        text-indent: 20px;
        background: #f4f4f4;
        border-radius: 5px;
        height: 30px;
        line-height: 30px;
      }

    }
  }

  .revealCon {

    width: 100%;

    .revealConItem {
      width: 97%;
      margin: 0 auto;
      margin-bottom: 10px;
      border-radius: 5px;
      box-shadow: 3px 6px 10px 2px #e9e9e9;

      .revealConBg {
        padding: 10px;

        .revealConTop {
          display: flex;
          align-items: center;
          font-size: 12px;

          .photo {
            margin-right: 25px;
            display: flex;
            align-items: center;

            img {
              width: 30px;
              height: 30px;
              margin-right: 5px;
            }
          }

          .times {
            flex: 3;
          }

          .num {
            text-align: right;
          }
        }

        .introduce {
          padding: 20px 0 0 0;
          display: flex;
          align-items: center;

          .name {
            width: 110px;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;

            }

            p {
              width: 110px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: center;
            }

          }

          .information {
            width: 75%;

            .item1 {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .item2 {
              display: inline-block;
              margin: 5px 0;
              font-size: 12px;
              color: #717171;
            }

            .item4 {
              display: flex;

              ul {
                display: flex;

                li {
                  padding: 0px 5px;
                  border-radius: 5px;
                  border: 1px solid #f8f5be;
                  margin-right: 5px;
                }
              }
            }

            .item5 {
              display: flex;

              .left {
                flex: 1;

                .principal {
                  display: inline-block;
                  /*width: 40px;*/
                  padding: 3px 10px;
                  border: 1px solid #f8f5be;
                  border-radius: 15px;

                }

                p {
                  color: #f8f5be;
                }
              }

              .rit {
                flex: 1;

                .brokerage {
                  display: inline-block;
                  padding: 3px 10px;
                  border: 1px solid #f8f5be;
                  border-radius: 15px;
                }

                p {
                  color: #f8f5be;
                }
              }
            }
          }


        }

      }
    }
  }
}

</style>
